<style lang="sass" scoped>
    .container{
        background:#e6e6e6;
    }
    .form{
        background:#fff;
        .group{
            padding:0 38px;
            border-bottom:1px solid #ccc;
            .label{
                height:94px;
                line-height:94px;
                font-size:34px;
                color:#3c3c3c;
                width:156px;
            }
            .input{
                flex:1;
                input{
                    width:100%;
                    height:92px;
                    font-size:34px;
                    border:0;
                }
                select{
                    width:100%;
                    height:92px;
                    font-size:34px;
                    background:#fff;
                    border:0;
                    color:#3c3c3c;
                }
                textarea{
                    padding:20px;
                    width:100%;
                    height:188px;
                    font-size:34px;
                    border:0;
                }
            }
        }
        
    }
    .delete{
        height:94px;
        line-height:94px;
        text-align:center;
        background:#fff;
        margin-top:20px;
        color:#ff7373;
        font-size:45px;
    }
    .keep{
        height:94px;
        line-height:94px;
        text-align:center;
        background:#ff7373;
        margin-top:80px;
        color:#fff;
        font-size:45px;
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
    }
</style>
<template>
    <div class="container">
        <div class="form">
            <div class="group flex">
                <div class="label">收件人</div>
                <div class="input">
                    <input v-model.trim="addObj.receiver" type="text">
                </div>
            </div>
            <div class="group flex">
                <div class="label">联系方式</div>
                <div class="input">
                    <input v-model.trim="addObj.receiverPhone" type="text">
                </div>
            </div>
            <div class="group flex">
                <div class="label">省</div>
                <div class="input">
                    <select v-model="addObj.provinceId">
                        <option value="">请选择省</option>
                        <option v-for="(item,i) in provinceList" :value="item.addressId">{{item.addressName}}</option>
                    </select>
                    <!-- <input v-model.trim="addObj.area" type="text"> -->
                </div>
            </div>

            <div class="group flex">
                <div class="label">市</div>
                <div class="input">
                    <!-- <input v-model.trim="addObj.area" type="text"> -->
                    <select v-model="addObj.cityId">
                        <option value="">请选择市</option>
                        <option v-for="(item,i) in cityList" :value="item.addressId">{{item.addressName}}</option>
                    </select>
                </div>
            </div>
            <div class="group flex">
                <div class="label">区</div>
                <div class="input">
                    <!-- <input v-model.trim="addObj.area" type="text"> -->
                    <select v-model="addObj.districtId">
                        <option value="">请选择区</option>
                        <option v-for="(item,i) in districtList" :value="item.addressId">{{item.addressName}}</option>
                    </select>
                </div>
            </div>
            <div class="group flex">
                <div class="label">详细信息</div>
                <div class="input">
                    <textarea v-model.trim="addObj.addressDetail" class="textarea"></textarea>
                </div>
            </div>
        </div>
        <div @click="deleteUserAddress()" v-if="$route.query.uAddressId" class="delete">删除地址</div>
        <div v-if="!$route.query.uAddressId" @click="add()" class="keep">保存</div>
        <div v-else @click="modifyUserAddress" class="keep">保存</div>
    </div>
</template>
<script>
    export default {
        components: {
        },
        data() {
            return {
                addObj:{
                    uAddressId:'',//用户地址ID
                    receiver:'', //	Y	string	收件人
                    receiverPhone:'', //	Y	string	联系方式
                    area:'',
                    addressDetail:'', //	Y	string	详细地址
                    provinceId:'', //	N	string	省ID
                    cityId:'', //	N	string	市ID
                    districtId:'', //	N	string	区ID
                },
                provinceList:[],
                cityList:[],
                districtList:[],
            };
        },
        watch:{
        },
        created(){
            server.getAddressInfo().then(res=>{
                this.provinceList = res;
            })
            if(this.$route.query.uAddressId){
                this.getInfo().then(()=>{
                    if(this.addObj.provinceId){
                        server.getAddressInfo(this.addObj.provinceId).then(res=>{
                            this.cityList = res;
                        })
                    }
                    if(this.addObj.cityId){
                        server.getAddressInfo(this.addObj.cityId).then(res=>{
                            this.districtList = res;
                        })
                    }
                    this.watchFn();
                });
            }else{
                this.watchFn();
            }
        },
        mounted() {
            this.$nextTick(() => {
                $('body').css({background:'#e6e6e6'});
                
            });
        },
        methods: {
            add(){
                let param = JSON.parse(JSON.stringify(this.addObj)); 
                util.ajax({
                    url:config.baseApi + 'bookMall-h5/api/userAddress/addUserAddress',
                    data:param,
                    success:(data=>{
                        popup.miss({content:'新增成功！'});
                        router.go(-1)
                    })
                })
            },
            modifyUserAddress(){
                let param = JSON.parse(JSON.stringify(this.addObj)); 
                util.ajax({
                    url:config.baseApi + 'bookMall-h5/api/userAddress/modifyUserAddress',
                    data:param,
                    success:(data=>{
                        popup.miss({content:'修改成功！'});
                        router.go(-1)
                    })
                })
            },
            deleteUserAddress(){
                util.ajax({
                    url:config.baseApi + 'bookMall-h5/api/userAddress/addUserAddress',
                    data:{
                        uAddressId:this.addObj.uAddressId
                    },
                    success:(data=>{
                        popup.miss({content:'删除成功！'});
                        router.go(-1)
                    })
                })
            },
            getInfo(){
                return new Promise(res=>{
                    util.ajax({
                        url:config.baseApi + 'bookMall-h5/api/userAddress/getUAddressInfo',
                        data:{
                            uAddressId:this.$route.query.uAddressId
                        },
                        success:(data=>{
                            if(data.data.provinceId>0){
                                console.log(true)
                            }else{
                                data.data.provinceId = '';
                            }
                            if(data.data.cityId>0){
                                console.log(true)

                            }else{
                                data.data.cityId = '';
                            }
                            if(data.data.districtId>0){
                                console.log(true)

                            }else{
                                data.data.districtId = '';
                            }
                            this.addObj = data.data;
                            this.$nextTick(()=>{
                                res();
                            })
                        })
                    })
                })
            },
            watchFn(){
                this.$watch('addObj.provinceId',(val)=>{
                    if(val){
                        server.getAddressInfo(val).then(res=>{
                            this.addObj.cityId=''; //	N	string	市ID
                            this.addObj.districtId=''; //	N	string	区ID
                            this.cityList = res;
                            this.districtList = [];
                        })
                    }else{
                        this.addObj.cityId=''; //	N	string	市ID
                        this.addObj.districtId=''; //	N	string	区ID
                        this.cityList = [];
                        this.districtList = [];
                    }
                })
                this.$watch('addObj.cityId',(val)=>{
                    if(val){
                        server.getAddressInfo(val).then(res=>{
                            this.addObj.districtId=''; //	N	string	区ID
                            this.districtList = res;
                        })
                    }else{
                        this.addObj.districtId=''; //	N	string	区ID
                        this.districtList = [];
                    }
                })
            }
        },
        
    };
</script>